﻿@model List<Zatify.Domain.Data.GeoLocation>
<link type="text/css" rel="stylesheet" href="@Url.Content("~/Scripts/chosen/chosen.css")" />
<script type="text/jscript" src="@Url.Content("~/Scripts/chosen/chosen.jquery.min.js")"></script>
<script type="text/javascript">

    (function ($) {

        $.fn.ajaxChosen = function () {

            var chosenId = $(this).attr("id") + "_chzn";

            var selector = $("#citySelector");
            var input = $("#" + chosenId).find(".chzn-search input");

            var timeout = null;

            input.keyup(function () {

                var that = this;

                if (timeout !== null) {
                    clearTimeout(timeout);
                }

                timeout = setTimeout(function () {

                    var citySearch = $(that).val();

                    if (citySearch.length > 2) {

                        $.ajax({
                            type: "GET",
                            url: '@Url.Action("GetLocations", "UserProfile")',
                            data: { city: citySearch },
                            success: function (data) {

                                selector.find("option").remove();

                                selector.append("<option value=''><option>");

                                $.each(data.locations, function (index, location) {

                                    selector.append("<option value='" + location.Zipcode + "' data-lat='" + location.Lat + "' data-long='" + location.Long + "'>" + location.City + " (" + location.State + ")" + "<option>");
                                });

                                selector.trigger("liszt:updated");

                                input.val(citySearch);
                            }
                        });
                    }

                }, 1000);

            });
        };

    } (jQuery));

    $(document).ready(function () {

        var citySelector = $("#citySelector");

        citySelector.chosen();
        citySelector.chosen().change(OnCityChanged);

        $("#citySelector").ajaxChosen();

    });

</script>
<select id="citySelector" data-placeholder="Choose Your City" style="width: 350px;"
    tabindex="1">
    <option value=""></option>
</select>